

<script setup>

//搜索-》政策路由

import { ref, VueElement } from "vue";
import store from "../store";

var timeformat = function(shijianchuo) {
  var time = new Date(shijianchuo*1);
  var y = time.getFullYear();
  var m = time.getMonth() + 1;
  var d = time.getDate();
  return y + "-" + m + "-" + d;
};
</script>

<script>
export default {
  data() {
    return {
      IStouch: "endtouch"
    };
  },
  methods: {
    starttouch(e) {
    e.currentTarget.className+=' starttouch';
    },
    endtouch(e) {
      e.currentTarget.className='zc'
    }
  }
};
var SkipTo=function(str){
  localStorage.setItem("policy",str)
  window.location.replace("../detail/ListPage.html")
};
</script>




<template>
  <div class="main">
    <div class="fenge"></div>
    <template v-for="item in store.state.searchmsg.policy" key="item">
      <div class="zc" :class="IStouch"
      @touchstart="starttouch"
      @touchend="endtouch"
      @click="SkipTo(JSON.stringify(item))">
        <div class="title">{{item.theme}}</div>
        <div class="time">发布时间:{{timeformat(item.timeStamp)}}</div>
        <div class="neirong">{{item.bulk}}</div>
        <img :src="item.cover" alt class="tupian" />
      </div>
    </template>
  </div>
</template>

<style scoped>
.main {
  position: relative;
  background-color: #f2f2f2;
  width: 100%;
  height: 100%;
}

.title {
  position: absolute;
  width: 90%;
  /* background-color: gray; */
  top: 15px;
  right: 20px;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.time {
  position: absolute;
  top: 65px;
  color: gray;
  left: 20px;
  font-size: 14px;
}

.neirong {
  position: absolute;
  top: 95px;
  width: 61.5%;
  left: 20px;
  color: gray;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 14px;
}

.tupian {
  position: absolute;
  width: 25.6%;
  height: 57px;
  bottom: 18px;
  right: 20px;
  background-color: gray;
  border-radius: 5px;
}

.zc {
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #fff;
  margin-bottom: 10px;
  /* background-color: pink; */
}

.back {
  position: absolute;
  color: white;
  line-height: 27px;
  padding-left: 10px;
  /* background-color: #fff; */
  padding-right: 10px;
}

.wenzi1 {
  width: 100%;
  height: 50px;
  /* background-color: pink; */
  line-height: 50px;
  text-indent: 15px;
  font-size: 12px;
  border-bottom: 1px solid #cccccc;
}

.wenzi1 > div {
  display: inline-block;
  color: rgb(70, 70, 70);
}

.nav {
  width: 100%;
  font-size: 20px;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 12px;
  color: rgb(79, 79, 79);
  background-color: #b22923;
  /* border-bottom: 1px solid gray; */
  position: relative;
  color: white;
  z-index: 2;
}
.sousuolan {
  position: relative;
  width: 100%;
  text-align: center;
  /* background-color: rgb(209, 199, 199, 0.5); */
  background-color: #fff;
  height: 44px;
  box-shadow: 0 0 5px #fbfbfb;
  padding-top: 2px;
  /* border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px; */
  z-index: 1;
  background-color: #bb413e;
  /* border-bottom: 1px solid pink; */
}
.search {
  width: 88%;
  height: 25px;
  color: gray;
  background-color: #fff;
  padding-left: 7px;
  border-radius: 10px;
  margin-top: 8px;
}
.sousuo {
  position: absolute;
  top: 13px;
  right: 6.4%;
  /* background-color: black; */
  width: 40px;
  height: 19px;
  border-left: 1px solid pink;
  line-height: 19px;
}

</style>